import React from 'react'
import {Button, Col, Form, Input, Radio, Row} from 'antd'
import {withRouter} from 'react-router-dom'
import {connect} from 'react-redux'
import SerialBox from '../../common/serial-box'
import UploadComponent from '../../common/upload-component'
import {editSerial, getSerial} from '../../../actions/serial'
import NavMenu from '../../common/nav-menu'

const {TextArea} = Input
const RadioGroup = Radio.Group
const formItemLayout = {
  labelCol: {
    xs: {span: 24},
    sm: {span: 8},
  },
  wrapperCol: {
    xs: {span: 24},
    sm: {span: 16},
  },
}
const tailFormItemLayout = {
  wrapperCol: {
    xs: {
      span: 24,
      offset: 0,
    },
    sm: {
      span: 16,
      offset: 8,
    },
  },
}
class EditSerialForm extends React.Component{
  componentWillReceiveProps = (nextProps) => {
    const {serial} = nextProps
    if (this.props.serial === serial) {
      return false
    }
    const {isAllVisible, isPublic, isRelease} = serial
    nextProps.form.setFieldsValue({
      ...serial,
      isAllVisible: isAllVisible ? 1 : 0,
      isPublic: isPublic ? 1 : 0,
      isRelease: isRelease ? 1 : 0
    })
  }

  componentDidMount = () => {
    const {serialId} = this.props.match.params
    this.props.getSerial(serialId)
  }

  handleSubmit = (e) => {
    e.preventDefault()
    this.props.form.validateFields((err, values) => {
      if (!err) {
        const {serialId} = this.props.match.params
        this.props.editSerial(serialId, values)
      }
    })
  }

  render() {
    const {form,settings} = this.props
    const {getFieldDecorator} = form
    const serial = form.getFieldsValue()
    const videos = this.props.serial.videos

    return <div>
      <NavMenu />
      <Row>
        <Col span={16}>
          <Form {...formItemLayout} onSubmit={this.handleSubmit}>
            <Form.Item label='名称'>
              {getFieldDecorator('title', {
                rules: [{required: true, message: '请填写名称'}]
              })(
                <Input/>
              )}
            </Form.Item>
            <Form.Item label='描述'>
              {getFieldDecorator('description', {
                rules: [{required: true, message: '请填写描述'}]
              })(
                <TextArea rows={4}/>
              )}
            </Form.Item>
            <Form.Item label='可见性'>
              {getFieldDecorator('isAllVisible', {
                rules: [{required: true, message: '请确定可见性'}],
              })(
                <RadioGroup>
                  <Radio value={1}>所有组织可见</Radio>
                  <Radio value={0}>当前组织可见</Radio>
                </RadioGroup>
              )}
            </Form.Item>
            <Form.Item label='是否公开'>
              {getFieldDecorator('isPublic', {
                rules: [{required: true, message: '是否公开'}],
              })(
                <RadioGroup>
                  <Radio value={1}>公开</Radio>
                  <Radio value={0}>需订阅</Radio>
                </RadioGroup>
              )}
            </Form.Item>
            <Form.Item label='发布'>
              {getFieldDecorator('isRelease', {
                rules: [{required: true, message: '是否发布'}],
              })(
                <RadioGroup>
                  <Radio value={1}>是</Radio>
                  <Radio value={0}>否</Radio>
                </RadioGroup>
              )}
            </Form.Item>
            <Form.Item label='封面图片'>
              <Col span={20}>
                {getFieldDecorator('coverUrl', {
                  rules: [{required: true, message: '请上传封面图片'}],
                })(
                  <Input placeholder='请输入图片链接或者上传一张图片'/>
                )}
              </Col>
              <UploadComponent
                env={settings.appContextPath}
                uploadSuccess={coverUrl => form.setFieldsValue({coverUrl})}/>
            </Form.Item>
            <Form.Item {...tailFormItemLayout}>
              <Button type='primary' htmlType='submit'>
                编辑
              </Button>
            </Form.Item>
          </Form>
        </Col>
        <Col span={6} offset={1}>
          <h4 className='divider'><b>预览</b></h4>
          <SerialBox
            serial={{...serial,username:this.props.serial.username,videos:videos}}/>
        </Col>
      </Row>
    </div>
  }
}

const mapStateToProps = ({settings,serial, serials}) => ({
  serial,
  settings,
  serials
})

const mapDispatchToProps = dispatch => ({
  getSerial: (id) => dispatch(getSerial(id)),
  editSerial: (id, serial) => dispatch(editSerial(id, serial)),
})
const EditSerialBody = Form.create()(EditSerialForm)

export default withRouter(connect(mapStateToProps,mapDispatchToProps)(EditSerialBody))